<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>perfect-scrollbar测试</title>
		<link rel="stylesheet" type="text/css" href="../../js/lib/perfect-scrollbar-v0.8.1/css/perfect-scrollbar.css" />
		
		<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/perfect-scrollbar-v0.8.1/js/perfect-scrollbar.jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				display: inline-block;
				margin-right: 10px;
				position: relative;
				width: 200px;
				height: 200px;
				overflow-y: auto;
				border: 1px solid dodgerblue;
			}
			
			.text {
				width: inherit;
				height: inherit;
				overflow: hidden;
				padding: 10px;
				box-sizing: border-box;
				resize: none;
				border: none;
				outline: none;
			}
		</style>
	</head>

	<body>
		<p>给textarea 附加 perfect scroll bar</p>

		<div id="container" class="box">
			<textarea class="text">start--asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdasdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asddd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh asdgsadgsdd sh ds sfh end--</textarea>
		</div>
		<script type="text/javascript">
			var $content = $('.text');
			var $container = $('#container');
			$container.perfectScrollbar();
			function resetHeight() {
				debugger;
				var scrollHeight = $content.get(0).scrollHeight;
				var offsetHeight = $content.get(0).offsetHeight;
				$content.height(scrollHeight);
				$container.perfectScrollbar('update');
				$container.scrollTop(scrollHeight-offsetHeight);
			}
			resetHeight();
			$content.onkeypress = function() {
				resetHeight();
			}
		</script>
	</body>

</html>